<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div ref="chart1" style="height: 400px">
        </div>
      </el-col>
      <el-col :span="12">
        <div style="height: 400px">
          <baidu-map class="map" center="合肥"  :zoom="15">
            <bm-transit start="合肥火车站" panel end="合肥南站" :auto-viewport="true" location="合肥"></bm-transit>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
          </baidu-map>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div style="height: 400px">
          111
        </div>
      </el-col>
      <el-col :span="12">
        <div style="height: 400px">222</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div style="height: 400px">
          111
        </div>
      </el-col>
      <el-col :span="12">
        <div style="height: 400px">222</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'DashBoard',
  data () {
    return {
      lineChart: null
    }
  },
  methods: {
    initLine () {
      // 折线图
      const lineChart = this.$echarts.init(this.$refs.chart1)
      // 调用实例 setOption方法 设置图表的配置和数据
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        legend: {
        },
        // 提示文案
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          // 自定义渲染内容
          // formatter: '{a0}-{b0}-{c0} 件 <br/> {a1}-{b1}-{c1} 元'
          formatter: (params) => {
            console.log(params)
            return `
              <div>
                <div>
                  ${params[0].seriesName}  
                  -
                  ${params[0].axisValue}  
                  -
                  ${params[0].value.sale}  
                  件
                </div>  
                <div>
                  ${params[1].seriesName}  
                  -
                  ${params[1].axisValue}  
                  -
                  ${params[1].value.profit}  
                  元
                </div>  
              </div>
            `
          }
        },
        xAxis: {
          type: 'category', // 类目轴
          axisLabel: {
            rotate: 45,
            margin: 10
          }
        },
        yAxis: {},
        dataset: {
          dimensions: ['item', 'sale', 'profit'],
          source: [
            {
              item: '衬衫',
              sale: 5,
              profit: 11
            },
            {
              item: '短裙',
              sale: 6,
              profit: 15
            },
            {
              item: '秋裤',
              sale: 2,
              profit: 9
            },
            {
              item: '羽绒服',
              sale: 21,
              profit: 5
            },
            {
              item: '黑丝',
              sale: 9,
              profit: 34
            }

          ]
        },
        series: [
          {
            type: 'line',
            name: '销量',
            smooth: true
          },
          {
            name: '利润',
            type: 'bar'
          }
        ],
        backgroundColor: '#f1f1f1',
        color: ['#73c0de', '#3ba272']
      }
      lineChart.setOption(option)
      this.lineChart = lineChart
    }
  },
  mounted () {
    this.initLine()
    window.onresize = () => {
      // 当屏幕尺寸发生改变 重新渲染 图表即可
      this.lineChart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.map{
  width: 100%;
  height: 300px;
}
</style>
